<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#div1{
			
				position: absolute;
				bottom:0;
				text-align: center;
				width:100%;
			}
			
		</style>
	</head>
	<body>
		<div id="div1">
			<img src="img/01.png" >
			<img src="img/02.png" >
			<img src="img/03.png" >
			<img src="img/02.png" >
			<img src="img/01.png" >
		</div>
		<script type="text/javascript">
			window.onload = function () {
				var box = document.querySelector('#div1')
				var imgs = document.querySelectorAll('#div1 img')
				var width=imgs[0].offsetWidth
				document.onmousemove = function(e) {
					Array.from(imgs).forEach(img=>{
						var a = img.offsetLeft + img.offsetWidth / 2 - e.clientX
						var b =img.offsetWidth / 2 + img.offsetTop + box.offsetTop - e.clientY
						var dis = Math.sqrt(a*a + b*b)
						if (dis<=400){
							var rate = 2 -dis/400
							img.width=rate*width
						}
					})
				}
			}
			
		</script>
	</body>
</html>
